@charset "UTF-8";
//-----------------------------------------------------
// mixin scss
// 包括常用的mixin，%及@function
// mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数
// %，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段
// @function，返回一个值，用于调用
//-----------------------------------------------------

// mixin & %
// 既定义了mixin也定义了%，根据需求使用@include或@extend调用
//-----------------------------------------------------

// inline-block
// ie6-7 *display: inline;*zoom:1;
@mixin inline-block($extend: false) {
    @if $extend {
        @extend %inline-block;
    } @else {
        display: inline-block;
        @if $lte7 {
            *display: inline;
            *zoom: 1;
        }
    }
}
%inline-block {
    @include inline-block(false);
}

// Center-align a block level element
// block得有宽度margin左右为auto才能居中
@mixin center-block($extend: true) {
  @if $extend {
      @extend %center-block;
  } @else {
      margin-left: auto;
      margin-right: auto;
  }
}
%center-block {
  @include center-block(false);
}

// float left & right
@mixin float($float: left) {
    float: $float;
    @if $lte7 {
        display: inline;
    }
}
%float{
    @include float;
}

// clearfix
// 闭合子元素的浮动
@mixin clearfix($extend: true) {
    @if $extend {
        @extend %clearfix;
    } @else {
        @if $lte7 {
            *zoom: 1;
        }
        &:before,
        &:after {
            content: "";
            display: table;
        }
        &:after {
            clear: both;
        }
    }
}
%clearfix {
  @include clearfix(false);
}

// Hide from both screenreaders and browsers: h5bp.com/u
// 既隐藏于视觉也隐藏于屏幕浏览器
@mixin hidden($extend: true) {
  @if $extend {
      @extend %hidden;
  } @else {
      display: none !important;
      visibility: hidden;
  }
}
%hidden {
    @include hidden(false);
}

// Hide only visually, but have it available for screenreaders
// 只隐藏于视觉，屏幕浏览器可以阅读
@mixin visually-hidden($extend: true) {
    @if $extend {
        @extend %visually-hidden;
    } @else {
        position: absolute;
        @if $lte7 {
            clip: rect(1px 1px 1px 1px); //ie6/7
        }
        clip: rect(1px, 1px, 1px, 1px); //standard
    }
}
%visually-hidden {
    @include visually-hidden(false);
}

// ul has list style
@mixin ul-has-style($style: disc) {
    margin-left: 25px;
    list-style: disc;
}
%ul-has-style {
    @include ul-has-style;
}

// Text overflow
// 元素可以设置宽度才可应用省略号
%ellipsis-basic {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@mixin ellipsis($width: 100%) {
    @extend %ellipsis-basic;
    width: $width;
}

// Opacity
// lte8使用filter兼容
@mixin opacity($opacity: 50) {
    opacity: $opacity / 100;
    @if $filter{
        filter: alpha(opacity=$opacity);
    }
}
%opacity{
    @include opacity;
}

// triangle
%triangle-basic {
    overflow: hidden;
    content: " ";
    height: 0;
    width: 0;
    font-size: 0;
}
@mixin triangle($direction, $size, $borderColor) {
    @extend %triangle-basic;
    @if $direction == top {
        border-bottom: $size solid $borderColor;
        border-left: $size dashed transparent;
        border-right: $size dashed transparent;
    }
    @else if $direction == right {
        border-left: $size solid $borderColor;
        border-top: $size dashed transparent;
        border-bottom: $size dashed transparent;
    }
    @else if $direction == bottom {
        border-top: $size solid $borderColor;
        border-left: $size dashed transparent;
        border-right: $size dashed transparent;
    }
    @else if $direction == left {
        border-right: $size solid $borderColor;
        border-top: $size dashed transparent;
        border-bottom: $size dashed transparent;
    }
}

//黑色背景色半透明
@mixin bgcolor-alpha($bgcolor: rgba(0,0,0,.5)){
  color: #fff;
  @if $filter{
      filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#{ie-hex-str($bgcolor)}', endColorstr='#{ie-hex-str($bgcolor)}');
  }@else{
      background-color: #333;
  }
  background-color: $bgcolor;
}
%bgcolor-alpha{
    @include bgcolor-alpha;
}

// 水平间隔线，适用于行列表
@mixin horizontal-line($border: 1px dashed $gray, $padding: 10px){
  border-bottom: $border;
  padding-top: $padding;
  padding-bottom: $padding;
}
%horizontal-line{
  @include horizontal-line;
}


// mixin
// 只定义了mixin，所以只能通过@include来调用
//-----------------------------------------------------

// rem
// thanks:http://drublic.de/blog/rem-fallback-sass-less/;
// @include rem(width, 20)   ->   width: 280px; width: 20rem;
@mixin rem($property, $px) {
    #{$property}: $px * $baseFontSize;
    #{$property}: #{$px}rem;
}
// @include rem-font-size(2)  ->  font-size: 28px; font-size: 2rem;
@mixin rem-font-size($px) {
    font-size: $px * $baseFontSize;
    font-size: #{$px}rem;
}

//最小高度
@mixin min-height($height){
    min-height: $height;
    height: auto!important;
    @if $lte7{
        _height: $height;
    }
}